<template>
  <div class="team-container">
    <div class="team-header">
      <h2>班组管理</h2>
      <el-button type="primary" size="small" @click="addMember">添加成员</el-button>
    </div>
    
    <div class="team-stats">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ teamMembers.length }}</div>
          <div class="stat-label">团队成员</div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ activeProjects }}</div>
          <div class="stat-label">进行中项目</div>
        </div>
      </el-card>
    </div>
    
    <div class="team-members">
      <h3>团队成员</h3>
      <div class="members-list">
        <el-card 
          v-for="member in teamMembers" 
          :key="member.id" 
          class="member-card"
          shadow="hover"
        >
          <div class="member-content">
            <el-avatar :size="48" :src="member.avatar" />
            <div class="member-info">
              <h4>{{ member.name }}</h4>
              <p>{{ member.role }}</p>
              <div class="member-status">
                <el-tag :type="member.status === '在线' ? 'success' : 'info'" size="small">
                  {{ member.status }}
                </el-tag>
              </div>
            </div>
            <div class="member-actions">
              <el-button size="small" @click="contactMember(member)">联系</el-button>
              <el-button size="small" type="danger" @click="removeMember(member.id)">移除</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const teamMembers = ref([
  {
    id: 1,
    name: '张三',
    role: '项目经理',
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
    status: '在线'
  },
  {
    id: 2,
    name: '李四',
    role: '前端开发',
    avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
    status: '在线'
  },
  {
    id: 3,
    name: '王五',
    role: '后端开发',
    avatar: 'https://randomuser.me/api/portraits/men/67.jpg',
    status: '离线'
  },
  {
    id: 4,
    name: '赵六',
    role: 'UI设计师',
    avatar: 'https://randomuser.me/api/portraits/women/23.jpg',
    status: '在线'
  }
])

const activeProjects = ref(3)

const addMember = () => {
  // 添加成员逻辑
  console.log('添加成员')
}

const contactMember = (member) => {
  // 联系成员逻辑
  console.log('联系成员', member.name)
}

const removeMember = (memberId) => {
  // 移除成员逻辑
  teamMembers.value = teamMembers.value.filter(member => member.id !== memberId)
}
</script>

<style scoped>
.team-container {
  padding: 0;
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid #eee;
}

.team-header h2 {
  margin: 0;
  color: #333;
  font-size: 1.5em;
  font-weight: 600;
}

.team-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  flex: 1;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.stat-content {
  text-align: center;
  padding: 8px 0;
}

.stat-number {
  font-size: 2em;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 4px;
}

.stat-label {
  color: #666;
  font-size: 0.9em;
}

.team-members h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 1.3em;
  font-weight: 600;
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-card {
  border-radius: 12px;
  transition: all 0.3s ease;
}

.member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.member-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.member-info {
  flex: 1;
}

.member-info h4 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 1.1em;
  font-weight: 600;
}

.member-info p {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 0.95em;
}

.member-status {
  display: flex;
  align-items: center;
}

.member-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* 移动端优化 */
@media (max-width: 600px) {
  .team-header {
    margin-bottom: 16px;
    padding: 0 0 12px 0;
  }
  
  .team-header h2 {
    font-size: 1.3em;
  }
  
  .team-stats {
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .stat-number {
    font-size: 1.8em;
  }
  
  .stat-label {
    font-size: 0.85em;
  }
  
  .team-members h3 {
    font-size: 1.2em;
    margin-bottom: 12px;
  }
  
  .members-list {
    gap: 10px;
  }
  
  .member-content {
    gap: 12px;
  }
  
  .member-info h4 {
    font-size: 1em;
  }
  
  .member-info p {
    font-size: 0.9em;
    margin-bottom: 6px;
  }
  
  .member-actions {
    gap: 6px;
  }
  
  .member-actions .el-button {
    font-size: 0.85em;
    padding: 6px 10px;
  }
}

@media (max-width: 375px) {
  .team-header {
    margin-bottom: 12px;
    padding: 0 0 10px 0;
  }
  
  .team-header h2 {
    font-size: 1.2em;
  }
  
  .team-stats {
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .stat-number {
    font-size: 1.6em;
  }
  
  .stat-label {
    font-size: 0.8em;
  }
  
  .team-members h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
  }
  
  .members-list {
    gap: 8px;
  }
  
  .member-content {
    gap: 8px;
  }
  
  .member-info h4 {
    font-size: 0.95em;
  }
  
  .member-info p {
    font-size: 0.85em;
    margin-bottom: 4px;
  }
  
  .member-actions {
    gap: 4px;
  }
  
  .member-actions .el-button {
    font-size: 0.8em;
    padding: 4px 8px;
  }
}
</style> 